<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>通知</title>
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
        <style>
            .el-header ,.el-footer{
                background-color: #B3C0D1;
                color: #333;
                /*text-align: center;*/
                line-height: 60px;
            }

            #title{
                margin-left: 7px;
            }
            #add{
                float: right;
                margin-top: 10px;
            }
            .search-bar{
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .input-box{
                display: flex;
                width: 35%;
            }
            .search-bar input {
                border: 1px solid #B3C0D1;
                width: 80%;
                height: 28px;
                line-height: 28px;
                vertical-align: top;
                border-radius: .25rem 0 0 .25rem;
            }

            .search-bar button {
                width: 20%;
                border: 1px solid #B3C0D1;
                background-color: #409eff;
                color: #fff;
                line-height: 28px;
                margin-left: -6px;
                border-radius: 0 .25rem .25rem 0;
                height: 32px;
            }

            #complete-box{
                margin-top: 28px;
                position: absolute;
                z-index: 99;
                text-align: left;
                border: 1px solid #f1f1f2;
                width: 336px;
                height: 120px;
                background-color: #fff;
            }
            #complete-box div{
                padding-left: 7px;
            }
            .selected-op span {
                color: red;
                cursor: pointer;
            }

            em {
                color: red;
                font-style: normal;
            }
        </style>
    </head>
    <body class="hold-transition">
        <div id="app" @click="showOps=false">
            <el-header><span id="title">通知</span><el-button id="add" type="primary" icon="el-icon-circle-plus-outline" @click="dialogFormVisible=true"></el-button></el-header>
            <br>
            <div class="search-bar">
                <div class="input-box">
                    <input placeholder="输入关键字搜索通知" v-model="params.key" type="text" @click.stop="" @focus="showOps=true"
                           @keyup="handleKeyUp($event)">
                    <button @click="handleSearch">搜索</button>
                </div>
                <div id="complete-box" v-show="showOps  && ops.length > 0">
                    <div v-for="(item, i) in ops" :key="i" @click="handleSearch" @mouseover="opsIndex = i"
                         :style='{"background-color": opsIndex===i ? "#EEE" : "#fff"}'>{{item}}
                    </div>
                </div>
            </div>
            <br>
            <el-main>
                <template>
                    <div>
                        <div style="width: 100%">
                            <el-table
                                    :data="dataList"
                                    stripe
                                    style="width: 100%">
                                <el-table-column
                                        prop="notice"
                                        label="通知公告"
                                >
                                    <template slot-scope="scope">
                                        <a  href="javascript:;"  class="buttonText" @click="adviceDetail(scope.row)" v-html="scope.row.title"></a>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="adate"
                                        width="100">
                                    <template slot="header" slot-scope="scope">
                                        <a href="#" target="_blank">More<<</a>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </template>
                <span style="margin-left: 550px">到底了....</span>
            </el-main>
                    <!-- 新增标签弹层 -->
                    <div class="add-form">
                        <el-dialog title="发布通知" :visible.sync="dialogFormVisible">
                            <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="120px">
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="标题(title)" prop="title">
                                            <el-input v-model="formData.title"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="内容(content)" prop="content">
                                            <el-input v-model="formData.content" type="textarea" ></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="时间(time)" prop="time">
                                            <el-input v-model="formData.time" type="text" ></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item>
                                            <el-button style="margin-top: 2px" type="primary" icon="el-icon-refresh" @click="getNowTime()">获取当前时间</el-button>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogCancel()">取消</el-button>
                                <el-button type="primary" @click="handleAdd()">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>
            </div>
        </div>
    </body>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script>
        var vue = new Vue({
            el: '#app',
            data:{
                params:{
                    key:""
                },
                ops:["加班","放假通知","发放奖金","加工资"],
                showOps: false,
                opsIndex: -1,
                isFixed: false,
				dataList: [{title:"放假通知",content:"放假",adate:"2022-5-22"},
                    {title:"放假通知",content:"放假",adate:"2022-5-22"},{title:"放假通知",content:"放假",adate:"2022-5-22"},
                ],//当前页要展示的分页列表数据
                formData: {title:null,content:null,time:null},//表单数据
                dialogFormVisible: false,//增加表单是否可见
                rules: {//校验规则
                    title: [{ required: true, message: '标题为必填项', trigger: 'blur' }],
                    content: [{ required: true, message: '内容为必填项', trigger: 'blur' }],
                    time: [{ required: true, message: '产奶时间为必填项', trigger: 'blur' }]
                }
            },
            //钩子函数，VUE对象初始化完成后自动执行
            created() {
                   /*初始化查询*/
                   this.search();
            },
            watch:{
                opsIndex() {
                    if (this.opsIndex !== -1) {
                        this.params.key = this.ops[this.opsIndex]
                    }
                },
            },
            methods: {
                handleKeyUp(e) {
                    if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 8) {
                        // 用户输入的字符，需要自动补全
                        this.getSuggestion();
                    } else if (e.keyCode === 13) {
                        // 用户按回车，需要搜索
                        this.search();
                    } else if (e.keyCode === 38) {
                        if (this.opsIndex > 0) {
                            this.opsIndex--;
                        } else {
                            this.opsIndex = this.ops.length - 1;
                        }
                    } else if (e.keyCode === 40) {
                        this.opsIndex = (this.opsIndex + 1) % this.ops.length;
                    } else if (e.keyCode === 27) {
                        this.show = false
                    }
                },
                getSuggestion() { // 查询自动补全
                    if (!this.params.key) {
                        // key没有值，不去搜索了
                        this.ops = [];
                        return;
                    }
                    axios.get("/advice/suggestion?key=" + this.params.key)
                        .then(resp => {
                            this.ops = resp.data;
                        })
                        .catch(e => {
                            if(this.isTest){
                                this.ops = ["涨工资", "放假", "加班"]
                            }else{
                                this.ops = []
                            }
                            console.log(e);
                        })
                },
                handleSearch(){
                    this.search();
                },
                search(){
                        axios.get("/advice/search/?key="+this.params.key).then((res)=>{
                             if(res.data.flag){
                                 this.dataList=res.data.data;
                             }else {
                                 this.$message.error(res.data.message);
                             }
                        });
                },
                /*优化*/
                 /*adviceList(){
                     axios.get("/advice/all").then((res=>{
                           if(res.data.flag){
                               this.dataList=res.data.data;
                           }
                     }));
                 },*/
                adviceDetail(data){
                          var url="adviceDetailed.html?title="+data.title+"&content="+data.content+"&date="+data.adate+"";
                           window.open(url);
                },
                handleAdd(){
                     axios.post("/advice",this.formData).then((res=>{
                           if(res.data.flag){
                               this.$message.success(res.data.message);
                               this.dialogCancel();
                           }else {
                               this.$message.error(res.data.message);
                           }
                     }));
                 },
                dialogCancel(){
                     this.formData={title:null,content:null,time:null};
                     this.dialogFormVisible=false;
                },
                getNowTime(){
                    let date = new Date();
                    var time=date.getFullYear()+"-"+date.getMonth()+"-"+date.getDay()+" "+date.getHours()+":"+date.getMinutes();
                    this.formData.time=time;
                }
            }
        })
    </script>
</html>